<template>
    <popup
        ref="popupRef"
        width="30%"
        title='地址编辑'
        class="bg-page"
        :showClose="false"
        :showFooter="false"
    >
        <el-form ref="formRef" :model="formData" class="mb-12" label-width="150px">
            
            
            <el-form-item label="姓名" prop="userName"
                          :rules="[{required: true, message:'收件人姓名不可为空',trigger:'change'}]">
                <el-input class="w-60" v-model.trim="formData.userName"
                          placeholder="请输入收件人姓名"
                          clearable/>
            </el-form-item>
            
            
            <el-form-item label="电话" prop="userPhone"
                          :rules="[{required: true, message:'收件人电话不可为空',trigger:'change'},
                                       { type: 'number', message: '用户电话必须是数字' }]">
                <el-input class="w-60" v-model.number.trim="formData.userPhone"
                          placeholder="请输入收件人电话"
                          clearable/>
            </el-form-item>
            
            
            <el-form-item label="省市区" prop="addressInfoEnum"
                          :rules="[{required: true, message:'省市区不可为空',trigger:'change'}]">
                
                <el-cascader
                    class="w-60"
                    placeholder="请选择省市区"
                    :options="afterSaleOrderConfig.addressTree"
                    v-model="formData.addressInfoEnum"
                    :props="{
                                  value: 'name',
                                  label: 'name',
                                  children: 'children',
                                  expandTrigger: 'hover' }"
                    @change="handleAddressChange"
                />
            </el-form-item>
            
            
            <el-form-item label="详细地址" prop="address"
                          :rules="[{required: true, message:'详细地址不可为空',trigger:'change'}]">
                <el-input class="w-60" v-model="formData.address"
                          placeholder="请输入详细地址"
                          clearable/>
            </el-form-item>
        
        
        </el-form>
        
        <div class=" flex justify-end pr-16">
            <el-button @click="handleClose">
                取消
            </el-button>
            
            <el-button @click="handleConfirm" type="primary">
                确定
            </el-button>
        </div>
    </popup>


</template>

<script lang='ts' setup>


import Popup from "@/components/popup/index.vue";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {FormInstance} from "element-plus";
import {getAfterSaleOrderRecipientAddress} from "@/api/afterSale/order/AfterSaleOrderController";
import IdRequest from "@/api/baisc/IdRequest";
import {AfterSaleAddressDTO} from "@/api/afterSale/order/dto/AfterSaleAddressDTO";
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";

let afterSaleOrderConfig = useAfterSaleEnumManager();
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formRef = shallowRef<FormInstance>()


// 定义地址数据
const formData: UnwrapNestedRefs<AfterSaleAddressDTO> = reactive(new AfterSaleAddressDTO())


/**
 * 弹窗打开 传入当前工单id
 */
function open(afterSaleId: number) {
    let idRequest = new IdRequest();
    idRequest.id = afterSaleId
    getAfterSaleOrderRecipientAddress(idRequest).then((response) => {
        for (let key in response) {
            //@ts-ignore
            formData[key] = response[key]
        }
        
        popupRef.value?.open()
        
    })
}


/**
 *     确认提交
 *
 * @author 徐寿春
 * 2023/4/8 u
 */
async function handleConfirm() {
    popupRef.value.close()
    
    emit('confirm', formData)
}


/**
 *  弹窗关闭
 *
 * @author 徐寿春
 * 2023/4/8 13:28
 */
function handleClose() {
    popupRef.value.close()
}

/**
 * 地址编辑
 *
 * @author 徐寿春
 * 2023/4/10 11:06
 */
function handleAddressChange(value: string[]) {
    formData.addressInfoEnum = value
    formData.economize = value[0]
    formData.city = value[1]
    formData.county = value[2]
}


const emit = defineEmits(['confirm', 'close'])
defineExpose({
    open
})


</script>

